HTML常用标签的使用

一、常见标签详解

1、<iframe>标签

HTML内联框架元素 <iframe> 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可能包含头部和正文，或头部和框架集，但不能包含正文和框架集。但是，<iframe>可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。

属性

只详细说明几个重要的属性

• frameborder 取值为1时（默认值），告诉浏览器在当前iframe与其他iframe之间绘制边框，取0时则无需绘制此边框。
• name 嵌入的浏览上下文（框架）的名称。该名称可以用作<a>标签，<form>标签的target属性值，或<input> 标签和 <button>标签的formtaget属性值。
• height 以CSS像素格式HTML5，或像素格式HTML 4.01，或百分比格式指定frame的高度。
• width 以CSS像素格式HTML5，或以像素格式HTML 4.01，或以百分比格式指定frame的宽度。
• src 嵌套页面的URL地址。使用遵守同源策略的 'about:blank' 来嵌套空白页。

2、<a>标签

HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

属性

• download 此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。
• href 这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号（＃），它指定一个内部目标在当前文档中的位置（ID）开头的名字。URL不限于网页（HTTP）的文件。URL可能使用浏览器所支持的任何协议。例如，文件，FTP，大多数用户代理mailto工作。PS:可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。除此之外href可以接：
  1、无协议的写法，如：//qq.com
  2、链接到本页某个部分#xxx 也可以是查询语句?name=xxx 或者相对路径./xxx.html
  3、伪协议javascript:alert(1); 点击不跳转不刷新javascript:;
• target 该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:
  _self: 当前页面加载。此值是默认的，如果没有指定属性的话。
  _blank: 新窗口打开。
  _parent: 加载响应到当前框架的父框架。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。（嵌套一层iframe标签，在上层打开）
  _top: 加载响应进入顶层浏览（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。（嵌套多层iframe标签，最顶层打开）

3、<form>标签

HTML <form> 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。

属性

• action 一个处理这个form信息的程序所在的URL。这个值可以被 <button> 或者 <input> 元素中的 formaction 属性重载（覆盖）。
• method 浏览器使用这种 HTTP 方式来提交 form. 可能的值有:
  1、post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
  2、get: 指的是 HTTP GET 方法; 表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做（数据暴露在URI里面）没什么副作用，或者表单仅包含ASCII字符时，再使用这种方法吧。（如果是GET的话和a标签功能一样）
  这个值可以被 <button> 或者 <input> 元素中的 formmethod 属性重载（覆盖）。
• name 这个form的名字。在HTML4中，这个用法不被推荐(作为替代，应该使用id). HTML5中，一个文档中的多个form当中，name必须唯一而不仅仅是一个空字符串。
• target 一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复. 在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里, 这是一个用于 browsing context 浏览器上下文 的名字/关键字 (举例来说, 标签页tab, 窗口window, or 或者行内 frame). 如下的关键字含有特别的含义:
  1、_self: 在当前HTML4或HTML5文档页面重新加载返回值。这个是默认值。译注：也就是说如果这个文档在一个frame中的话，self是在当前frame（document）中重新加载的，而不是整个页面（window）。
  2、_blank: 以新的HTML4或HTML5文档窗口加载返回值。
  3、_parent: 在父级的frame中以HTML4或HTML5文档形式加载返回值，如果没有父级的frame，行为和_self一致。
  4、_top: 如果是HTML 4文档: 清空当前文档，加载返回内容；HTML5: 在当前文档的最高级内加载返回值，如果没有父级，和_self的行为一致。
  5、iframename: 返回值在指定frame中加载。

4、<input>标签

HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。

属性

<input>标签的属性非常多，这里我只写几种常用的属性，更多可在MDN上查找

• name 控件的名称，与表单数据一起提交。
• value 控件的初始值. 此属性是可选的，除非type 属性是radio或checkbox。注意，当重新加载页面时，如果在重新加载之前更改了值，Gecko和IE将忽略HTML源代码中指定的值。
• checked 如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态.
• disabled 这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中， click 事件 将不会被分发 。 并且，禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden，此属性将被忽略。
• type 控件类型的显示。如果这个属性没有指定，默认的类型是 text。可用的值包括：
  这里只写出几个常用的类型，详细可以查看MDN
  1、button：无缺省行为按钮。
  2、checkbox： 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）。
  3、password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。
  4、radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
  5、submit：用于提交表单的按钮。
  6、text：单行字段；换行会将自动从输入的值中移除。

5、<button>标签

HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。 默认情况下，HTML按钮的显示样式接近于 user agent 所在的宿主系统平台（用户操作系统）的按钮， 但你可以使用 CSS 来改变按钮的样貌。

属性

• name button的名称，与表单数据一起提交。
• value button的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。
• type button的类型。可选值：
  1、submit: 此按钮提交表单数据给服务器。未指定时，此值为默认值，或者如果此属性动态变为空值或无效值。
  2、reset: 此按钮重置所有组件为初始值。
  3、button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
  4、menu: 此按钮打开一个由指定<menu>元素进行定义的弹出菜单。

6、<table>标签

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

属性

表格标签支持 全局属性。所有属性现在已经弃用（请使用CSS代替）。

相关

• 其它表格相关的HTML元素: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>;
• 可能特别有用的关于设定表格元素样式的 CSS 属性：
  width 控制表格的宽度；
  border, border-style, border-color, border-width, border-collapse, border-spacing 控制 单元格边框，规则和框架方面；
  margin 和padding 设定特定的单元格内容样式；
  text-align 和vertical-align 定义文本和单元格内容的对齐方式。

二、HTML标签注意事项

HTML标签是什么

通过HTMl标签是可以清晰的看出网页的内部结构，简单的来说就是通过标签，我们可以来声明这是个什么东西，而不是用来决定这个东西是什么样子，例如：<strong>和<b>的默认CSS样式是一样的，为什么还要有两个标签,这是因为strong是一个逻辑状态，而bold是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用strong呈现出的表现形式不同于单纯的加粗。 因为bold是一个物理状态，他没有区分表现形式和内容。如果让bold做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑。
很多人喜欢用<div>和<span>这样的无含义标签从头用到尾，这样是不对的，因为看起来会很费劲，都会要加上class，这样就会降低代码可读性，

关于块级元素和内联元素的区别

HTML标签是没有块级元素和内联元素的区别，什么时候才有？只有在CSS里面才有，例如，我们都以为<div>是块级元素，但如果是下面这样，还能说<div>是块级元素吗？

<style>
  div{
    display: inline;
  }
</style>

现在<div>就是内联元素了，也就是说HTML无法控制一个元素是块级元素还是内联元素，也就是说HTML只是定义这是一个什么东西，而不是去管它是什么样子。